<style lang="scss">
    
    .padding-0-15{
        padding: 0 15px;
    }
    .trackdetail{
        .trackname{
            font-size: 18px; padding: 5px 10px; background: #f2f2f2;border-radius:5px;    
        }
        .titlebox{
            border:1px solid #e9e9e9;border-radius:5px
        }
        .titleone{
            padding: 5px 15px;border-bottom: 1px solid #e9e9e9;
        }
        .ivu-table-wrapper-with-border{
                border: 1px solid #e9e9e9;
                border-bottom: 0;
                border-right: 0;
        }
    }
</style>
<template>
    <div>
        <div class="trackdetail">
            <div class="trackname">运单号：{{trackingNo}}</div>
            <Row class="margin-top-15">
                <Col span="9">
                    <div class="titlebox">
                        <div class="font-14 titleone">运单信息</div>
                        <div class="margin-top-10 padding-0-15">
                            <span class="font-14">承运商服务</span>
                            <span class="pull-right">
                                <img v-if="formData.carrier == 'UPS'" src="/img/ups.png" style="vertical-align: bottom;width:16px" />
                                <img v-if="formData.carrier == 'FedEx'" src="/img/fedex.png" style="vertical-align: middle;width:35px;margin-top:-6px" />
                                {{formData.serviceCode}}
                            </span>
                        </div>
                        <div class="margin-top-10 padding-0-15">
                            <span class="font-14">接收日期</span>
                            <span class="pull-right">{{formData.deliveredTime}}</span>
                        </div>
                        <div class="margin-top-10 padding-0-15">
                            <span class="font-14">Zone区</span>
                            <span class="pull-right">{{formData.zoneCode}}</span>
                        </div>
                        <div class="margin-top-10 padding-0-15">
                            <span class="font-14">包裹数量</span>
                            <span class="pull-right">{{packData.length}}</span>
                        </div>
                        <div class="margin-top-10 padding-0-15">
                            <div class="font-14">发货地址</div>
                            <div>{{formData.shipperAddressLine1}}</div>
                            <div>{{formData.shipperAddressLine2}}</div>
                            <div>{{formData.shipperContactName}} {{formData.shipperContactPhone}}</div>
                        </div>
                        <div class="margin-top-10 padding-0-15 margin-bottom-15">
                            <div class="font-14">收货地址</div>
                            <div>{{formData.receiverAddressLine1}}</div>
                            <div>{{formData.receiverAddressLine2}}</div>
                            <div>{{formData.receiverContactName}} {{formData.receiverContactPhone}}</div>
                        </div>
                    </div>
                </Col>
                <Col span="15" class="padding-left-15">
                    <div class="titlebox">
                        <div class="font-14 titleone">包裹信息</div>
                        <Table
                        class="margin-15"
                        :columns="packColumns"
                        :data="packData"
                        border></Table>
                    </div>
                    <div class="titlebox margin-top-15">
                        <div class="font-14 titleone">费用明细</div>
                        <Table
                        class="margin-15"
                        :columns="costColumns"
                        :data="costData"
                        border></Table>
                    </div>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
import { HttpGetBillFreezeDetail } from '@/service/api/views'
import { mapState,mapGetters } from "vuex";
export default {
    props:['trackingNo'],
    data(){
        return {
            packData:[],
            costData:[],
            formData:{},

        }
    },
    computed:{
        packColumns(){
            return [
                {
                    title: "尺寸",
                    key: "parcel",
                },
                {
                    title: "重量",
                    key: "weight",
                },
                {
                    title: "保价",
                    key: "valuation",
                    render:(h,{row})=>{
                        return <div>{row.valuation == 1 ? '是' : '否'}</div>
                    }
                },
                {
                    title: "签收",
                    key: "signfor",
                    render:(h,{row})=>{
                        return <div>{row.signfor == 1 ? '是' : '否'}</div>
                    }
                },
            ]
        },
        costColumns(){
            return [
                {
                    title: "计费项",
                    key: "costName",
                },
                {
                    title: "预估金额",
                    render:(h,{row})=>{
                        return <div>{row.estimatedCost} ({row.currency})</div>
                    }
                },
            ]
        }
    },
    created(){
        HttpGetBillFreezeDetail({
            trackingNo:this.trackingNo
        }).then(res=>{
            this.formData = res.data;
            let dataone = {
                parcel : res.data.parcelLength+'*'+res.data.parcelWidth+'*'+res.data.parcelHeight+' '+res.data.parcelLengthUnit,
                weight : res.data.parcelWeight+' '+res.data.parcelWeightUnit,
                valuation : res.data.valuation,
                signfor : res.data.signfor,
            }
            this.packData.push(dataone)
            this.costData = res.data.costItems
            let costs = 0
            res.data.costItems.map(item=>{
                costs += item.estimatedCost
            })
            let allcost = {
                costName:'合计',
                estimatedCost:costs.toFixed(4),
                currency:'USD'
            }
            this.costData.push(allcost)
        })
    },
    methods:{

    },
}
</script>